<template>
	<view class="Ginput" :class="islabel?active?'active':'':'nolabel'">
		<label v-if="islabel">{{name}}</label>
		<input 
		@blur="inputBlur" 
		:placeholder="islabel?'':name" 
		@focus="inputFocus" 
		@input="inputValue" 
		:maxlength='maxlength'
		:value="value"
		class="input"
		:type="InputType"/>
		<block v-if="type=='password'">
			<u-icon @click="show=false" v-if="show" name="eye" color="#8D93AA" size="18"></u-icon>
			<u-icon @click="show=true" v-else name="eye-off" color="#8D93AA" size="18"></u-icon>
		</block>
	</view>
</template>

<script>
	export default {
		props:{
			name:'',
			islabel:{
				type:Boolean,
				default:true
			},
			type:{
				type:String,
				default:()=>{
					return 'text'
				}
			},
			value:{
				type:[String,Number],
				default:()=>{
					return ''
				}
			},
			maxlength:{
				type:[String,Number],
				default:()=>{
					return ''
				}
			}
		},
		data() {
			return {
				show:false,
				focus:false,
			};
		},
		computed:{
			active(){
				if(this.value||this.focus){
					return true
				}
			},
			InputType(){
				if(this.type=='password'&&this.show){
					return 'text'
				}else if(this.type=='password'&&!this.show){
					return 'password'
				}else{
					return this.type
				}
			}
		},
		methods:{
			inputValue(e){
				// console.log(e)
				this.$emit('input',e.target.value)
			},
			inputFocus(){
				this.focus = true
			},
			inputBlur(){
				this.focus = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Ginput{
		width: 100%;
		height: 105rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #f5f5f5;
		padding:0 15rpx;
		flex: 1;
		&.active{
			label{
				font-weight: 600;
				color: #FFFFFF;
				top: 10rpx;
			}
			input{
				margin-top: 25rpx;
			}
		}
		&.nolabel{
			height: auto;
			padding: 0;
			input{
				height: 70rpx;
				line-height: 70rpx;
			}
		}
		label{
			position: absolute;
			left: 5px;
			top: calc(50% - 15rpx);
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			transition: 0.35s;
		}
		input{
			width: calc(100% - 20rpx);
			font-size: 28rpx;
			font-weight: 400;
			color: #000000;
			border: 0;
		}
	}
</style>
